<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
</head>

<body>
  <button>全部</button>
  <button>衣服</button>
  <button>汽车</button>
  <button>手机</button>
  <ul id="box">
    <li></li>
  </ul>
  <script src="./jquery-3.4.1.min.js"></script>
  <script>
    // 跨域   接口请求不符合同源策略
    // 同源策略  同协议 http或https  同ip 同端口


    // douyin  服务器地址  http://127.0.0.8:8888

    // qian    前端服务器地址  http://127.0.0.1:5500


    // $.post() //简写的post请求
    // $.post("请求地址", "发送的数据", "请求成功回调", "预期返回的数据类型")
    // 预期返回的数据类型    text json html xml  jsonp srcipt


    $("button").click(function () {
      var val = $(this).html(); //按钮中文字
      $.post("http://127.0.0.8:8888/list", { searchText: val }, function (res) {
        // res ----返回的数据
        console.log(res)
        var str = ``;
        $.each(res, function (index, ele) {
          str += `<li>${ele}</li>`
        })
        $("ul").html(str)

      }, "json")

    })


  </script>
</body>

</html>